<template>
	<div class="mt-30px mb-30px">
		<!-- 用户信息 -->
		<div class="border-1px border-solid border-#E5E6EB bg-#FAFAFA p-20px">
			<div class="flex items-center justify-between">
				<div class="flex items-center">
					<img src="/transaction/c2c/c2cPersonal/avatar.svg" alt="" class="w-60px h-60px">
					<div class="ml-10px">
						<div class="flex items-center mb-10px text-20px text-#000000">
							<p>1025495148</p>
							<img src="/transaction/c2c/c2cPersonal/modify.svg" alt="" class="w-16px h-16px ml-10px">
						</div>
						<p class="text-14px text-#000000">认证用户</p>
					</div>
				</div>
				<el-button type="primary" color="#114CEE"
					style="width:180px;height:55px;font-size: 18px;" @click="applyAdvertiserShow=true">成为认证广告方</el-button>
			</div>
			<div class="mt-30px flex items-center justify-between">
				<div
					class="w-230px bg-#FFFFFF flex flex-col items-center pt-20px pb-20px border-1px border-solid border-#E5E6EB">
					<p class="mb-20px text-14px text-#000000">平均放行</p>
					<p>
						<span class="text-20px text-#000000 font-bold">0.00</span>
						<span class="ml-6px text-14px text-#000000">分钟</span>
					</p>
				</div>
				<div
					class="w-230px bg-#FFFFFF flex flex-col items-center pt-20px pb-20px border-1px border-solid border-#E5E6EB">
					<p class="mb-20px text-14px text-#000000">平均付款</p>
					<p>
						<span class="text-20px text-#000000 font-bold">0.00</span>
						<span class="ml-6px text-14px text-#000000">分钟</span>
					</p>
				</div>
				<div
					class="w-230px bg-#FFFFFF flex flex-col items-center pt-20px pb-20px border-1px border-solid border-#E5E6EB">
					<p class="mb-20px text-14px text-#000000">账户已创建</p>
					<p>
						<span class="text-20px text-#000000 font-bold">7</span>
						<span class="ml-6px text-14px text-#000000">天</span>
					</p>
				</div>
				<div
					class="w-230px bg-#FFFFFF flex flex-col items-center pt-20px pb-20px border-1px border-solid border-#E5E6EB">
					<p class="mb-20px text-14px text-#000000">首次交易至今</p>
					<p>
						<span class="text-20px text-#000000 font-bold">7</span>
						<span class="ml-6px text-14px text-#000000">天</span>
					</p>
				</div>
			</div>
		</div>
		<!-- 收款方式管理 -->
		<div class="text-28px font-bold text-#000000 mt-30px mb-20px">
			C2C收款方式管理
		</div>
		<div class="flex items-center justify-between">
			<p class="w-720px">
				收款方式：您添加的C2C收款方式将在C2C交易出售数字货币时向买方展示作为您的收款方式，请务必使用您本人的
				实名账户确保买方可以顺利给您转账。您最多可添加3种收款方式
			</p>
			<el-button type="primary" color="#E5E6EB" style="color:#000000;font-size: 18px;width: 250px;height: 50px;"
				@click="toAddPay">
				添加收款方式
			</el-button>
		</div>
		<div class="mt-30px p-20px border-1px border-solid rounded-10px border-#E5E6EB" v-for="(item, index) in payList"
			:key="index">
			<div class="flex items-center justify-between">
				<div class="flex items-center">
					<p class="w-4px h-14px mr-10px" :style="{ backgroundColor: item.color }"></p>
					<p class="text-#000000 text-18px font-bold">{{ item.methods }}</p>
				</div>
				<div class="flex items-center">
					<div class="mr-20px  flex items-center">
						<el-button type="primary" link style="font-size: 18px;">
							编辑
						</el-button>
					</div>
					<div class="flex items-center">
						<el-button type="primary" link style="font-size: 18px;">
							删除
						</el-button>
					</div>
				</div>
			</div>
			<div class="flex mt-10px ml-14px">
				<div class="w-30%">
					<p class="text-#86909C text-16px mb-6px">姓名</p>
					<p class="text-#000000 text-18px ">{{ item.name }}</p>
				</div>
				<div class="w-30%">
					<p class="text-#86909C text-16px mb-6px">
						{{ item.methods === '银行借记卡' ? '银行账号' : item.methods + '账号' }}
					</p>
					<p class="text-#000000 text-18px ">{{ item.account }}</p>
				</div>
				<div class="w-30%" v-if="item.methods === '银行借记卡'">
					<p class="text-#86909C text-16px mb-6px">银行卡名称</p>
					<p class="text-#000000 text-18px ">{{ item.bankName }}</p>
				</div>
				<div v-else>
					<p class="text-#86909C text-16px mb-6px">收款码</p>
					<div class="demo-image__preview">
						<el-image style="width: 24px; height: 24px" :src="item.code2d" :zoom-rate="1.2" :max-scale="7"
							:min-scale="0.2" :initial-index="4" fit="cover" :preview-src-list="[item.code2d]" />
					</div>
				</div>
			</div>
			<div class="flex mt-10px ml-14px" v-if="item.methods === '银行借记卡'">
				<div class="w-30%">
					<p class="text-#86909C text-16px mb-6px">开户支行</p>
					<p class="text-#000000 text-18px ">{{ item.bank }}</p>
				</div>
			</div>
		</div>
	</div>
	<ApplyAdvertiser :show="applyAdvertiserShow" @close="closeApplyAdvertiser"/>
</template>
<script setup lang="ts">
import ApplyAdvertiser from './components/ApplyAdvertiser.vue'
import useJump from '@/utils/jump';

const { jumpTo } = useJump();

const payList = ref<any[]>([
	{
		color: '#F6AC57',
		methods: '银行借记卡',
		name: '夏天',
		account: '6215584152332145677',
		code2d: '',
		bank: '罗湖支行',
		bankName: '招商银行'
	},
	{
		color: '#01A9F2',
		methods: '支付宝',
		name: '夏天',
		account: '15256523620',
		code2d: '/transaction/c2c/c2cPersonal/code2d.svg',
		bank: '',
		bankName: ''
	},
	{
		color: '#2DC100',
		methods: '微信',
		name: '夏天',
		account: '15256523620',
		code2d: '/transaction/c2c/c2cPersonal/code2d.svg',
		bank: '',
		bankName: ''
	}
])

// 跳舞添加收款方式页面
const toAddPay = () => {
	jumpTo('/transaction/c2c/c2cPersonal/addPayment')
}

// 控制申请认证广告页面显示
const applyAdvertiserShow = ref<boolean>(false);

const closeApplyAdvertiser = (val:boolean) => {
	applyAdvertiserShow.value = val;
}
</script>
<style lang="scss" scoped></style>
